<template>
    <h2>门店显示页面</h2>
    门店名称:
    <input type="text" v-model="name">
    门店服务:
     <select v-model="vid">
                    <option :value="-1">请选择</option>
                    <option v-for="item in Server" :value="item.vid">{{item.vName}}</option>
    </select>
    <input type="button" value="查询" @click="Show">
    <input type="button" value="批量删除" @click="PiDel()">
    <input type="button" value="批量修改" @click="PiUpdate()">
    <table border="1">
        <tr>
            <td>
                <input type="checkbox" v-model="flag" @change="Ischeck">全选/全取消
            </td>
            
            <td>门店编号</td>
            <td>门店名称</td>
            <td>门店地址</td>
            <td>门店图片</td>
            <td>门店状态</td>
            <td>门店服务</td>
            <td>操作</td>
        </tr>
        <tr v-for="item in info">
            <td>
                <input type="checkbox" :value="item.sid" :checked="check" v-model="arries">
            </td>
            <td>{{item.sid}}</td>
            <td>{{item.sName}}</td>
            <td>{{item.address}}</td>
            <td><img :src="item.img" style="width: 70px;height: 50px;"></td>
            <td>{{item.state==true?'启用':'禁用'}}</td>
            <td>{{item.vName}}</td>
            <td>
                <a href="#" @click="Del(item.sid)">逻辑删除</a>
                <a href="#" @click="Update(item.sid)">修改</a>
            </td>
        </tr>
    </table>
    <span>
        <td>一共{{ pageinfo.totalcount }}条数据，每页显示{{ pageinfo.pagesize }}条数据,当前第{{ pageinfo.pageindex }}页，一共{{ pageinfo.pagecount }}页</td>
        <a href="#" @click="Page('One')" style="margin-top: 20px;">首页</a>
        <a href="#" @click="Page('shang')" style="margin-top: 20px;">上一页</a>
        <a href="#" @click="Page('xia')" style="margin-top: 20px;">下一页</a>
        <a href="#" @click="Page('wei')" style="margin-top: 20px;">尾页</a>
    </span>
</template>
<script setup lang="ts">
import axios from 'axios';
import { flattenDiagnosticMessageText } from 'typescript';
import { ref ,onMounted, initCustomFormatter} from 'vue';
import { useRouter } from 'vue-router';
const router=useRouter();
onMounted(()=>{
    Bind();
    Show();
})
const pageinfo=ref({
    pageindex:1,
    pagesize:2,
    totalcount:0,
    pagecount:0
})
const Page=(choose:string)=>{
switch(choose){
case 'One':
    pageinfo.value.pageindex=1;
    break;
case 'shang':
    if(pageinfo.value.pageindex>1){
        pageinfo.value.pageindex--;

    }
    else{
        alert("已经为第一页")
    }
    break;
 case 'xia':
        if(pageinfo.value.pageindex<pageinfo.value.pagecount){
            pageinfo.value.pageindex++;
        }
        else{
            alert("已经为最后一页")
        }
        break;
case 'wei':
    pageinfo.value.pageindex=pageinfo.value.pagecount
    break;
}
Show();
}


const flag=ref(false);
const check=ref(false);
const arries:any=ref([])
const Ischeck=()=>{
    if(flag.value){
        check.value=true;
        arries.value=info.value.map((item:any)=>{
            return item.sid     
       })
    }
    else{
        check.value=false;
        arries.value=[]
    }

}
const PiDel=()=>{
    if(confirm("确定批量删除吗")){
        
        axios.delete("https://localhost:7218/api/Shops/PiDel?id="+arries.value)
        .then(res=>{
            if(res.data>0){
                alert("删除成功")
                Show();
            }
        })
    }
    
}
const PiUpdate=()=>{
    if(confirm("确定修改吗")){
        axios.put("https://localhost:7218/api/Shops/PiUpdate?id="+arries.value)
        .then(res=>{
        if(res.data){
            alert("修改成功");
            Show();
        }
    })
    }
   
}
//绑定下拉框
const Server=ref([{
    "vid": 0,
    "vName": "string"
}])
const Bind=()=>{
    axios.get("https://localhost:7218/api/Shops/ShowServer")
    .then(res=>{
        Server.value=res.data
    })
}
const info=ref([{
    "sid": 1,
    "sName": "",
    "address": "",
    "img": "",
    "state": true,
    "isdel": 0,
    "vid": -1,
    "vName": ""
}])
const name=ref("")
const vid=ref(-1)
const Show=()=>{
    axios.get("https://localhost:7218/api/Shops/ShowShops",{
        params:{
            name:name.value,
            vid:vid.value,
            pagesize:pageinfo.value.pagesize,
            pageindex:pageinfo.value.pageindex
        }
    })
    .then(res=>{
        info.value=res.data.pagedata
        pageinfo.value.pagecount=res.data.pagecount
        pageinfo.value.totalcount=res.data.totalcount
    })
}
const Del=(sid:number)=>{
    if(confirm("确定删除吗")){
        axios.delete("https://localhost:7218/api/Shops/Del",{
            params:{
                id:sid
            }
        })
        .then(res=>{
            if(res.data>0){
                alert("删除成功");
                Show();

            }
            else{
                alert("删除失败");
            }
        })
    }

}
const Update=(sid:number)=>{
    router.push({
        name:"UpdateShop",
        params:{
            Sid:sid
        }
    })
}
</script>